<template>
	<view v-show="!isLoading" class="container">
		<!-- 商品图片轮播 -->
		<SlideImage v-if="!isLoading" :video="goods.video" :videoCover="goods.videoCover"
			:images="goods.goods_images" />

		<!-- 商品信息 -->
		<view v-if="!isLoading" class="goods-info m-top20">
			<!-- 价格、销量 -->
			<view class="info-item info-item__top dis-flex flex-x-between flex-y-end">
				<view class="block-left dis-flex flex-y-center">
					<!-- 商品售价 -->
					<text class="floor-price__samll">￥</text>
					<text class="floor-price">{{ goods.goods_price_min }}</text>
					<!-- 会员价标签 -->
					<view v-if="goods.is_user_grade" class="user-grade">
						<text>会员价</text>
					</view>
					<!-- 划线价 -->
					<text v-if="goods.line_price_min > 0" class="original-price">￥{{ goods.line_price_min }}</text>
				</view>
				<view class="block-right dis-flex">
					<!-- 销量 -->
					<view class="goods-sales">
						<text>已售{{ goods.goods_sales }}件</text>
					</view>
				</view>
			</view>
			<!-- 标题、分享 -->
			<view class="info-item info-item__name dis-flex flex-y-center">
				<view class="goods-name flex-box">
					<text class="twoline-hide">{{ goods.goods_name }}</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="goods-share__line"></view>
				<view class="goods-share">
					<button class="share-btn dis-flex flex-dir-column" open-type="share">
						<text class="share__icon iconfont icon-fenxiang"></text>
						<text class="f-24">分享</text>
					</button>
				</view>
				<!-- #endif -->
			</view>
			<!-- 商品卖点 -->
			<view v-if="goods.selling_point" class="info-item info-item_selling-point">
				<text>{{ goods.selling_point }}</text>
			</view>
		</view>

		<!-- 选择商品规格 -->
		<!-- <view v-if="goods.spec_type == 20" class="goods-choice m-top20 b-f" @click="onShowSkuPopup(3)">
			<view class="spec-list">
				<view class="flex-box">
					<text class="col-8">选择：</text>
					<text class="spec-name" v-for="(item, index) in goods.specList"
						:key="index">{{ item.spec_name }}</text>
				</view>
				<view class="f-26 col-9 t-r">
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
		</view> -->

		<!-- 商品服务 -->
		<Service v-if="!isLoading" :goods-id="goodsId" @success="updateShop"/>

		<!-- 商品SKU弹窗 -->
		<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" />
		<view class="gnote">
			<view class="gtitle"> 购买须知</view>
			<view class="gitem" v-if="goods.valid_date">
				<view class="gtit">
					<u-icon name="calendar" color="#303133" size="40"></u-icon>有效期
				</view>
				<view class="gdesc"><text>●</text>{{ goods.valid_date }}</view>
			</view>
			<view class="gitem" v-if="goods.usable_time">
				<view class="gtit">
					<u-icon name="bell" color="#303133" size="40"></u-icon>可用时间
				</view>
				<view class="gdesc"><text>●</text>{{ goods.usable_time }}</view>
			</view>
			

			<view class="gitem" v-if="goods.appoint_rules">
				<view class="gtit">
					<u-icon name="clock" color="#303133" size="40"></u-icon>使用规则
				</view>
				<view class="gdesc"><text>●</text>{{ goods.appoint_rules }}</view>
			</view>
			
			<view class="gitem" v-if="goods.unusable_time">
				<view class="gtit">
					<u-icon name="bell" color="#303133" size="40"></u-icon>不可用时间
				</view>
				<view class="gdesc"><text>●</text>{{ goods.unusable_time }}</view>
			</view>
		</view>
        <!-- 当前门店 START -->
		<view class="mdnow" v-if="curShop.poi_name">
			<view class="mtop" @click="shopBtn">
				<view class="tit">适用门店（{{shopCount}}家)</view>
				<view class="desc">
					 全部门店<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			<view class="mbottom">
				<view class="logo">
					<image src="../../static/logo.png" mode="widthFix"></image>
				</view>
				<view class="shop">
					{{curShop.poi_name}}
				</view>
				<view class="map">
					<view class="dao" @click="goMap(curShop)">
						<image class="dimg" src="@/static/dao.png" mode="widthFix"></image>
						<view>导航</view>
					</view>
					<view class="dao" @click="phoneclick">
						<image class="dimg call" src="@/static/phone.png" mode="widthFix"></image>
						<view>电话</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 当前门店 START -->
		<!-- 商品描述 -->
		<view v-if="!isLoading" class="goods-content">
			<!-- <view class="item-title b-f">
				<text>商品描述</text>
			</view> -->
			<block v-if="goods.content != ''">
				<view class="goods-content__detail b-f">
					<mp-html :content="goods.content" />
				</view>
			</block>
			<empty v-else tips="亲，暂无商品描述" />
		</view>

		<!-- 底部选项卡 -->
		<view class="footer-fixed">
			<view class="footer-container">
				<!-- 导航图标 -->
				<view class="foo-item-fast">
					<!-- 首页 -->
					<view class="fast-item fast-item--home" @click="showActionSheet">
						<view class="fast-icon">
							<text class="iconfont icon-kefu"></text>
						</view>
						<view class="fast-text">
							<text>客服</text>
						</view>
						<view class="fast-text">
							<text>08:00~20:00</text>
						</view>
					</view>
					<!-- <button
            class="btn-normal"
            open-type="im"
            :data-im-id="imId"
            data-im-type="goods"
            :data-goods-id="goods.douyin_goods_id"
            data-biz-line="1"
			
            @im="imCallback"
            @error="onimError"
          >
            <view class="fast-item">
              <view class="fast-icon">
                <text class="iconfont icon-kefu1"></text>
              </view>
              <view class="fast-text">
                <text>客服</text>
              </view>
            </view>
          </button> -->
					<!-- <button class="btn-normal" @click="phoneclick">
            <view class="fast-item">
              <view class="fast-icon">
                <text class="iconfont icon-dianhua"></text>
              </view>
              <view class="fast-text">
                <text>电话</text>
              </view>
            </view>
          </button> -->
					<!-- 购物车 -->
					<!-- <view class="fast-item fast-item--cart" @click="onTargetCart"> -->
					<!-- <view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">{{ cartTotal > 99 ? '99+' : cartTotal }}
            </view> -->
					<!-- <view class="fast-icon">
              <text class="iconfont icon-daishouhuo"></text>
            </view>
            <view class="fast-text">
              <text>储值</text>
            </view> -->
					<!-- </view> -->
				</view>
				<!-- 操作按钮 -->
				<view class="foo-item-btn">
					<view class="btn-wrapper">
						<!-- <view class="btn-item btn-item-deputy" @click="onShowSkuPopup(2)">
              <text>加入购物车</text>
            </view> -->
						<view class="btn-item btn-item-main" @click="onShowSkuPopup(3)">
							<text>立即购买</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 快捷导航 -->
		<u-popup v-model="showAction" :border-radius="10" safe-area-inset-bottom mode="bottom">
			<view class="u-btn phone">
				<button @click="phoneclick"><text class="iconfont icon-dianhua" ></text>客服热线 </button>
			</view>
			<view class="u-btn kefu">
				<button open-type="im" :data-im-id="imId" data-im-type="goods" :data-goods-id="goods.douyin_goods_id"
					data-biz-line="1" @im="imCallback" @error="onimError"> <text
						class="iconfont icon-kefu"></text>联系客服（08:00~20:00)</button>
			</view>
			<view class="u-bar"></view>
			<view class="u-cancel" @click="showAction=false">取消</view>
		</u-popup>
		<!-- <shortcut bottom="120rpx" /> -->
	</view>
</template>

<script>
	import * as GoodsApi from "@/api/goods";
	import * as CartApi from "@/api/cart";
	// import Shortcut from '@/components/shortcut'
	import SlideImage from "./components/SlideImage";
	import SkuPopup from "./components/SkuPopup";
	import Comment from "./components/Comment";
	import Service from "./components/Service";

	export default {
		components: {
			// Shortcut,
			SlideImage,
			SkuPopup,
			Comment,
			Service,
		},
		data() {
			return {
				showAction: false,
				// 正在加载
				isLoading: true,
				// 当前商品ID
				goodsId: null,
				// 商品详情
				goods: {},
				// 购物车总数量
				cartTotal: 0,
				// 显示/隐藏SKU弹窗
				showSkuPopup: false,
				// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
				skuMode: 1,
				imId: "hjm616161",
				shopCount:367,
				curShop:{}
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 记录商品ID
			this.goodsId = parseInt(options.goodsId);
			// 加载页面数据
			this.onRefreshPage();
			const kefuList = getApp().globalData.kefuList;
			this.imId = kefuList[0];
		},

		methods: {
			updateShop(data){
				this.shopCount = data.count;
				this.curShop = data.shop;
				console.log(111,data)
			},
			showActionSheet() {
				this.showAction = true;
			},
			selectClick() {

			},
			imCallback(e) {
				console.log("跳转IM客服成功", e.detail);
			},
			onimError(e) {
				console.log("拉起IM客服失败", e.detail);
			},
			// 刷新页面数据
			onRefreshPage() {
				const app = this;
				app.isLoading = true;
				Promise.all([app.getGoodsDetail(), app.getCartTotal()]).finally(
					() => (app.isLoading = false)
				);
			},
			phoneclick() {
				tt.makePhoneCall({
					phoneNumber: "4009673811",
					success: function() {
						// tt.showToast({
						//   title: 'success'
						// });
					},

					fail(err) {
						// tt.showToast({
						//   icon: 'none',
						//   title: err.errMsg
						// });
						console.log(err.errMsg);
					},
				});
			},
			shopBtn(){
			   this.$navTo("pages/shop/index");	
			},
            goMap(data){
            	tt.openLocation({
            	  latitude:parseFloat(data.latitude), // 纬度
            	  longitude:parseFloat(data.longitude), // 经度
            	  name: data.poi_name, // 目的地名称
            	  //address: data.poi_name // 目的地详细地址
            	});
            },
			// 获取商品信息
			getGoodsDetail() {
				const app = this;
				return new Promise((resolve, reject) => {
					GoodsApi.detail(app.goodsId)
						.then((result) => {
							app.goods = result.data.detail;
							resolve(result);
						})
						.catch(reject);
				});
			},

			// 获取购物车总数量
			getCartTotal() {
				const app = this;
				return new Promise((resolve, reject) => {
					CartApi.total()
						.then((result) => {
							app.cartTotal = result.data.cartTotal;
							resolve(result);
						})
						.catch(reject);
				});
			},

			// 更新购物车数量
			onAddCart(total) {
				this.cartTotal = total;
			},

			/**
			 * 显示/隐藏SKU弹窗
			 * @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
			 */
			onShowSkuPopup(skuMode = 1) {
				this.skuMode = skuMode;
				this.showSkuPopup = !this.showSkuPopup;
			},

			// 跳转到首页
			onTargetHome(e) {
				this.$navTo("pages/index/index");
			},

			// 跳转到购物车页
			onTargetCart() {
				uni.navigateTo("pages/index/index");
			},
		},

		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			const app = this;
			// 构建页面参数
			const params = app.$getShareUrlParams({
				goodsId: app.goodsId,
			});
			return {
				title: app.goods.goods_name,
				path: `/pages/goods/detail?${params}`,
			};
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			const app = this;
			// 构建页面参数
			const params = app.$getShareUrlParams({
				goodsId: app.goodsId,
			});
			return {
				title: app.goods.goods_name,
				path: `/pages/goods/detail?${params}`,
			};
		},
	};
</script>

<style scoped lang="scss">
	page {
		background: #fafafa;
	}
    .u-btn{
		button{
			background-color:#fff;
			padding:10rpx 28rpx; 
		}
		&.phone .iconfont{
			color:#7dadff;
			margin-right:20rpx;
		}
		&.kefu .iconfont{
			color:#fca62b;
			margin-right:20rpx;
		}
	}
	.u-bar {
		height: 20rpx;
		background-color: #f6fafb;
	}

	.u-cancel {
		line-height: 100rpx;
		background-color: #fff;
		color: #000;
		text-align: center;
		position: relative;

		font-size: 40rpx;
	}

	.foo-item-fast .fast-item .fast-icon {
		font-size: 40rpx;
		margin-bottom: 0
	}

	.foo-item-fast .fast-item .fast-text {
		font-size: 24rpx;
		margin-top: 5rpx;
		text-align: center;
	}

	.gnote {
		color: #303133;
		margin:20rpx auto 0;
		background-color: #fff;
		padding: 40rpx 30rpx 5rpx;
        border-top:10px solid #f1f0f0;
		.gtitle {
			font-weight: bold;
			font-size: 36rpx;
			margin-bottom: 10rpx;
		}

		.gitem {
			margin: 12rpx 0;

			.gtit {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #303133;
				font-weight: bold;

				/deep/.u-icon {
					top: 4rpx;
					position: relative;
				}
			}

			.gdesc {
				margin-top: 2rpx;
				color: #303133;
				font-size: 30rpx;
				padding-left: 10rpx;
				display: flex;
				align-items: center;

				text {
					color: #6a6b6d;
					font-size: 20rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.goods-name .twoline-hide {
		color: #000;
		font-weight: bold;
	}
	.mdnow{
		position:relative;
		padding:30rpx;
		border-top:10px solid #f1f0f0;
		border-bottom:10px solid #f1f0f0;
		.mtop{
			display: flex;
			justify-content: space-between;
			.tit{
				color:#000;
				font-size:34rpx;
				font-weight: bold;
			}
			.desc{
				color:#303133
			}
		}
		.mbottom{
			margin-top:20rpx;
			display: flex;
			justify-content: space-between;
			.logo{
				flex:2;
				image{
					width:90%;
					display: block;
					height: 0;
				}
			}
			.shop{
				flex:5;
				color:#000;
				font-size:32rpx;
				font-weight: bold;
			}
			.map{
				flex:2;
				
				display: flex;
				justify-content: space-between;
				.dao{
					text-align: center;
					color:#303133;
					.dimg{
						display: block;
						margin:0 auto 0;
						width: 50rpx;
						height: 0;
						&.call{
							transform: scale(0.8);
						}
					}
				}
			}
		}
	}
</style>
<style lang="scss" scoped>
	@import "./detail.scss";
</style>